<template>
  <div>
    <div id="pie" style="width: 100%; height: 100%" />
  </div>
</template>
<script>
// 导入echarts包
import * as echarts from 'echarts'
// 指定一个dom元素，来显示图标
// var option
export default {
  data() {
    return {
option: {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  toolbox: {
    show: true

  },
  series: [

    {
      name: 'Area Mode',
      type: 'pie',

      radius: [20, 50],
      center: ['50%', '50%'],
      roseType: 'area',

      data: [
        { value: 36, name: '前端' },
        { value: 27, name: 'java' },
        { value: 17, name: 'Python' },
        { value: 11, name: 'c++' },
        { value: 7, name: 'UI' }

      ]
    }
  ]
}
    }
  },
  mounted() {
var chartDom = document.getElementById('pie')
var myChart = echarts.init(chartDom)
    this.option && myChart.setOption(this.option)
  }
}
</script>
